<template>
	<div class="List" ref="wrapper">

		<div>

			<div class="cyty_list">
				<div class="cyty_list_title">热门城市</div>
				<ul class="cyty_list_ul">
					<li v-for="(item,index) in hotCities" @click="showClick(item.name)">{{item.name}}</li>
				</ul>
			</div>

			<div class="cyty_list">
				<div class="cyty_list_title">字母排序</div>
				<ul class="mp-character-list">
					<li v-for="(item,key) in cities" @click="sortClikc">{{key}}</li>
				</ul>
			</div>

			<div class="cyty_list" v-for="(item,key) in cities" :key="key">
				<div class="cyty_list_title" :ref="key">{{key}}</div>
				<ul class="mp-list">
					<li v-for="xxx in item" @click="showClick(xxx.name)">{{xxx.name}}</li>
				</ul>
			</div>

		</div>

	</div>
</template>

<script>
	import { mapMutations, mapState } from 'Vuex'
	import BScrool from 'better-scroll'
	export default {
		props: ['cities', 'hotCities'],
		data() {
			return {
				target: ''
			}
		},
		mounted() {
			this.scroll = new BScrool(this.$refs.wrapper,{click: true});
		},
		methods: {
			sortClikc(e) {
				this.target = e.target.innerText;
			},

			showClick(cityName) {
				this.cityChange(cityName);
				this.$router.push('/');
			},

			...mapMutations(['cityChange'])

		},
		watch: {
			target() {
				const dom = this.$refs[this.target][0];
				this.scroll.scrollToElement(dom);
			}
		}
	}
</script>

<style scoped="scoped">
	.List {
		overflow: hidden;
		position: absolute;
		top: .88rem;
		bottom: 0;
		left: 0;
		right: 0;
		/*height: 100;*/
	}
	
	.cyty_list_title {
		width: 100%;
		background: #ECECFF;
		padding: .2rem .5rem;
		font-size: .24rem;
		/*margin: .24rem .3rem;*/
	}
	
	.cyty_list_ul {
		position: relative;
		overflow: hidden;
		z-index: 0;
		list-style: none;
		background-color: #fff;
	}
	
	.cyty_list_ul:before {
		content: '';
		position: absolute;
		width: 33.3%;
		left: 33.3%;
		height: 100%;
		border-left: .02rem solid #ddd;
		border-right: .02rem solid #ddd;
	}
	
	.cyty_list_ul li {
		width: 33.33%;
		height: .9rem;
		line-height: .9rem;
		font-size: .28rem;
		text-align: center;
		border-bottom: .02rem solid #ddd;
		margin-bottom: -1px;
		float: left;
		display: list-item;
		position: relative;
		z-index: 10;
		color: #212121;
	}
	
	.mp-character-list {
		position: relative;
		overflow: hidden;
		z-index: 0;
		background-color: #fff;
		list-style: none;
		padding: .3rem 0;
	}
	
	.mp-character-list li {
		width: 16.66%;
		height: .9rem;
		line-height: .9rem;
		font-size: .28rem;
		text-align: center;
		float: left;
		position: relative;
		z-index: 10;
		color: #212121;
		display: list-item;
	}
	
	.mp-list {
		position: relative;
		overflow: hidden;
		z-index: 0;
		background-color: #fff;
	}
	
	.mp-list:before {
		content: '';
		position: absolute;
		width: 25%;
		left: 25%;
		height: 100%;
		border-left: .02rem solid #ddd;
		border-right: .02rem solid #ddd;
	}
	
	.mp-list:after {
		content: '';
		position: absolute;
		width: 10%;
		left: 75%;
		height: 100%;
		border-left: .02rem solid #ddd;
		border-right: 0;
	}
	
	.mp-list li {
		width: 25%;
		height: .9rem;
		line-height: .9rem;
		font-size: .28rem;
		text-align: center;
		border-bottom: .02rem solid #ddd;
		margin-bottom: -1px;
		float: left;
		position: relative;
		z-index: 10;
		color: #212121;
		display: list-item;
	}
</style>